<template>
  <div class="content">
    <!-- 面包屑区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>公用视频列表</el-breadcrumb-item>
      <el-breadcrumb-item>公用视频列表1</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row :gutter="40">
        <div class="content_title">
          <p></p>
          <span>视频列表</span>
        </div>
      </el-row>
      <div class="video_list">
        <ul>
          <li @click="pink_video(index)" v-for="(item,index) in video_list" :key="index">
            <img :src="item.images" />
            <span>{{item.title}}</span>
            <p>{{item.detail}}</p>
          </li>
        </ul>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="querytInfo.pagenum"
          :page-size="querytInfo.pagesize" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>

    <!-- 视频弹窗-->
    <video_content :visible.sync="videoDialogvisible" :index="video_index"></video_content>
  </div>
</template>

<script>
import data_list from './modules/data.json'
import video_content from './modules/video_content.vue'
export default {
  data () {
    return {
      video_list: [],
      videoDialogvisible: false,
      video_index: null,
      querytInfo: {
        query: '',
        // 当前页数
        pagenum: 1,
        // 总条数
        pagesize: 14
      },
      total: 14
    }
  },
  components: {
    video_content: video_content
  },
  mounted () {
    this.getvideoList()
  },
  methods: {
    getvideoList () {
      this.total = data_list.data.length
      this.video_list = data_list.data.slice((this.querytInfo.pagenum - 1) * this.querytInfo.pagesize, this.querytInfo
        .pagesize * this.querytInfo.pagenum)
    },
    pink_video (index) {
      this.videoDialogvisible = true
      this.video_index = index
    },
    // 监听psgesize 改变
    handleSizeChange (newsize) {
      // console.log(newsize);
      this.querytInfo.pagesize = newsize
      this.getvideoList()
    },
    // 监听 页码值 改变
    handleCurrentChange (newpage) {
      // console.log(newpage);
      this.querytInfo.pagenum = newpage
      this.getvideoList()
    }
  }
}
</script>
<style lang="less" scoped="scoped">
  .content_title {
    width: 100%;
    height: 100%;
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5f5f5;

    span {
      font-size: 18px;
      height: 25px;
      line-height: 25px;
      color: #434343;
      display: inline-block;
      margin-left: 10px;
    }
    p{
      width: 5px;
      height: 25px;
      background-color: #34bdfc;
    }
  }

  .el-cascader {
    width: 100%;
  }

  .el-breadcrumb {
    margin: 0 0 10px 0;
  }

  .el-card {
    margin-top: 20px;
    height: calc(100vh - 195px);
    overflow-y: auto;

    .video_list {
      width: 100%;
      height: auto;

      ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
        height: calc(100% - 150px);
      }

      ul li {
        width: 205px;
        margin-top: 20px;

        img {
          width: 100%;
          height: 200px;
          padding: 2px;
          height: 240px;
          border: 1px solid #eeeeee;
          display: inline-block;
          background: #fff;
          box-sizing: border-box;
        }

        span {
          width: 100%;
          height: 25px;
          line-height: 25px;
          color: #ff0000;
        }

        p {
          width: 100%;
          height: 25px;
          line-height: 25px;
          color: #434343;
        }
      }
    }
  }

  .el-pagination {
    margin-top: 20px;
  }

  .el-table {
    margin-top: 20px;
  }
</style>
